<template>
  <div class="dwgs_skeleton">
    <van-skeleton v-for="item in num">
      <template #template>
        <div class="skele_wrap">
          <div class="img" v-if="type !== 'tzfw'">
            <van-skeleton-image row-width="100px" />
          </div>
          <div>
            <div v-if="type === 'news' || type === 'tzfw'">
              <van-skeleton title :row="2" />
              <van-skeleton title :row="2" />
              <van-skeleton title :row="2" />
              <van-skeleton title :row="2" />
              <van-skeleton title :row="2" />
              <van-skeleton title :row="2" />
              <van-skeleton title :row="2" />
            </div>
            <div v-if="type === 'dwgs'">
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
const props = defineProps({
  type: {
    type: String,
    default: 'dwgs'
  },

})
const num = ref(props.type === 'dwgs' ? 2 : 1)
</script>

<style lang='less' scoped>
.dwgs_skeleton {
  .skele_wrap {
    padding: 17.2px;

    .van-skeleton-image {
      width: 100%;
      height: 100%;


    }
  }

  .van-skeleton {
    display: block;
    padding: 0;
  }

  .img {
    margin-bottom: 10px;
    width: 100%;
    height: 180px;
  }
}
</style>
<style lang="less">
.dwgs_skeleton {
  .skele_wrap {
    .van-skeleton-image__icon {
      width: auto;
      height: auto;
      font-size: 80px !important;
    }
  }
}
</style>